<template>
  <div class="related-courses-list">
    <moduleHeader
      title="最新问答"
      rightStr="更多"
      :rightUrl="parseFullPath('/dayi/')"
    ></moduleHeader>
    <div class="related-courses-list-content">
      <a
        :class="[
          'related-courses-list-item',
          index !== list.length - 1 ? 'b-b-1' : '',
          index !== 0 ? 'm-t-17' : ''
        ]"
        v-for="(item, index) in list"
        :key="item.object_id"
        @click.prevent="goNews(item)"
        :href="parseFullPath(getUrl(item))"
      >
        <span class="ell-2 related-courses-list-item-title">
          {{ item.question }}
        </span>
        <time class="related-courses-list-item-time">
          {{ item.end_time }}
        </time>
      </a>
    </div>
  </div>
</template>

<script>
import moduleHeader from '@/components/moduleHeader/index.vue'
export default {
  components: {
    moduleHeader
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    getUrl(item) {
      let mapId = item.map_id || item.object_id
      //   return location.origin + '/dayi/' + mapId + item.s_p_t + '.html'
      return '/dayi/' + mapId + item.s_p_t + '.html'
    },

    goNews(item) {
      this.zlaBtn = {
        key_name: '最新问答',
        key_content: '最新问答'
      }

      let params = {}
      if (+item.is_unread > 0) params.is_unread = 1
      let url = this.getUrl(item)
      //s_p_t只会取值1（帖子答疑），2（对话答疑），因服务端渲染，不允许代参，代参不利于SEO
      this.goTo(url, {
        query: params,
        target: '_blank',
        watch: true
      })
    }
  }
}
</script>

<style scoped>
.related-courses-list {
  width: 312px;
  background: #ffffff;
  padding-top: 24px;
  padding-bottom: 8px;
}
.related-courses-list-content {
  margin-top: 18px;
  overflow-y: auto;
  padding: 0 20px;
  max-width: 312px;
  overflow-x: hidden;
}

.related-courses-list-item-title {
  max-height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #383838;
  line-height: 20px;
}

/**添加a标签下划线**/
.related-courses-list-item-title:hover {
  text-decoration: underline;
}

.related-courses-list-item-time {
  display: block;
  margin-top: 4px;
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}

.related-courses-list-item {
  display: block;
  padding-bottom: 16px;
  text-decoration: none;
}
.b-b-1 {
  border-bottom: 1px solid #f2f2f2;
}
</style>
